<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<canvas id="canvas1" width="800" height="800">当前浏览器不支持</canvas>
<script>
	function canvas1() {
		var canvas1 = document.getElementById('canvas1');

		var context = canvas1.getContext('2d');

		drawRect(context,100,100,400,400,10,"#058","#f70");
		drawRect2(context,300,300,400,400,10,"#058","rgba(0,255,0,.5)");
	}
	canvas1();

	function drawRect(cxt,x,y,width,height,borderWidth,borderColor,fillColor) {
		cxt.beginPath();
		cxt.rect(x,y,width,height)//路径绘制矩形
		cxt.closePath();

		cxt.lineWidth= borderWidth;
		cxt.fillStyle=fillColor;
		cxt.strokeStyle= borderColor;

		cxt.fill();
		cxt.stroke();
	}
	function drawRect2(cxt,x,y,width,height,borderWidth,borderColor,fillColor) {
		cxt.lineWidth= borderWidth;
		cxt.fillStyle=fillColor;
		cxt.strokeStyle= borderColor;

		cxt.fillRect(x,y,width,height);//填充矩形
		cxt.strokeRect(x,y,width,height);//线条矩形
	}
</script>



</body>
</html>